<template>
	<view class="content">
		<navTop :title="navtop.title" :isHeight="false" :tipsShow="false" hasBgc="#fff" :color="navtop.color" :isBack="isBack" ></navTop>
		<view class="content-box" :style="{paddingTop:barHeight+'rpx'}">
		</view>
		<view class="contetn-list">
			<view class="contetn-list__item">
				<view class="title">
					Profile Photo
				</view>
				<view class="flex-l">
					<view class="user-info" >
						<image :src="formData.head" class="img" mode="" @click="uploadImg"></image>
					</view>
					<image :src="vDown" mode="" class="right"></image>
				</view>
			</view>
			<view class="contetn-list__item">
				<view class="title">
					Name
				</view>
				<view class="flex-l">
					<view class="user-info" >
						<input class="tips" v-model="formData.name" />
					</view>
					<image :src="vDown" mode="" class="right"></image>
				</view>
			</view>
			<view class="contetn-list__item">
				<view class="title">
					Gender
				</view>
				<view class="flex-l">
					<view class="user-info" >
						<picker @change="bindPickerChange" class="banner-tips__icon" :value="index" :range="array">
							<text class="tips">{{array[formData.gender?(formData.gender-1) :0]}}</text>
						</picker>
					</view>
					<image :src="vDown" mode="" class="right"></image>
				</view>
			</view>
			<!-- <view class="contetn-list__item">
				<view class="title">
					Language
				</view>
				<view class="flex-l">
					<view class="user-info" >
						<picker @change="bindPickerChangeLang" class="banner-tips__icon" :value="langIndex" :range="langArray">
							<view class="uni-input">{{formData.language}}</view>
						</picker>
					</view>
					<image :src="vDown" mode="" class="right"></image>
				</view>
			</view> -->
			<view class="contetn-list__item">
				<view class="title">
					Birthday
				</view>
				<view class="flex-l">
					<view class="user-info" >
						<picker mode="date" :value="formData.birthday" :end="endDate" @change="bindDateChange">
							<text class="tips">{{formData.birthday || '请选择生日'}}</text>
						</picker>
					</view>
					<image :src="vDown" mode="" class="right"></image>
				</view>
			</view>
			<view class="contetn-list__item">
				<view class="title">
					Job
				</view>
				<view class="flex-l">
					<view class="user-info">
						<input class="tips" v-model="formData.job"  placeholder="请输入工作"/>
					</view>
					<image :src="vDown" mode="" class="right"></image>
				</view>
			</view>
			<view class="contetn-list__item">
				<view class="title">
					Nationality
				</view>
				<view class="flex-l">
					<view class="user-info" >
						<input class="tips" v-model="formData.nationality" placeholder="请输入国籍"/>
					</view>
					<image :src="vDown" mode="" class="right"></image>
				</view>
			</view>
			<view class="contetn-list__item">
				<view class="title">
					Location
				</view>
				<view class="flex-l">
					<view class="user-info" >
						<input class="tips" v-model="formData.location" placeholder="请输入居住地"/>
					</view>
					<image :src="vDown" mode="" class="right"></image>
				</view>
			</view>
		</view>
		<view class="content-btn" @click="submit">
			Save
		</view>
		
	</view>
</template>
<script>
import navTop from '@/components/nav-title.vue';
import vDown from '@/static/v-down.png'
import iconAdd from '@/static/icon_add.png'

	export default {
		components: {
			navTop
		},
		data() {
			return {
				iconAdd,
				vDown,
				index: 0,
				langIndex: 0,
				endDate: '',
				wxInfo : {},
				userInfo : {},
				isBack: false,
				formData: {},
				barHeight: 0,
				langArray: ['EN', 'ZH', '한국어', '日本語', 'Français', 'Русский язык'],
				array: ['Male', 'Female', 'Other'],
				navtop: {
					title: 'Edit Information',
					color: '#024230'
				},
				infoList: [
					{
						img: '/static/index-p2.png',
						type: 'img',
						title: 'Profile Photo'
					},
					{
						type: 'info',
						title: 'Name',
						info: 'Jorge Curtis'
					},
					{
						type: 'info',
						title: 'Gender',
						info: 'Male'
					},
					{
						type: 'info',
						title: 'Birthday',
						info: '1991-01-01'
					},
					{
						type: 'num',
						title: 'Job',
						info: 'Optional'
					},
					{
						type: 'info',
						title: 'Location',
						info: '广东 广州'
					}
				]
			}
		},
		onLoad(e) {
			console.log(e)
			if (e.lang) {
				this.language = e.lang
			}
		},
		created() {
			this.isBarHeight999().then((statusBarHeight)=>{
				this.barHeight = statusBarHeight + 160
			})
		},
		mounted() {
			this.endDate = new Date()
			let wxInfo = uni.getStorageSync("wxInfo") || {}
			let userInfo = uni.getStorageSync("userInfo") || {}
			this.userInfo = userInfo
			this.wxInfo = wxInfo
			if (!userInfo || !userInfo.name) {
				this.isBack = false
			} else {
				this.isBack = true
			}
			this.formData = {
				id: userInfo.id,
				head: userInfo.head || wxInfo.avatarUrl,
				name: userInfo.name || wxInfo.nickName,
				telephone: userInfo.telephone || '',
				nationality: userInfo.nationality || wxInfo.country,
				gender: userInfo.gender || wxInfo.gender,
				birthday: userInfo.birthday || '',
				job: userInfo.job || '',
				location: userInfo.location || wxInfo.city
			}
		},
		methods: {
			async uploadImg() {
				const data = await this.$uploadImg()
				this.formData.head = data.filePath
			},
			bindPickerChange(v,i) {
				this.index = v.detail.value
				if (this.index == 1) {
					this.formData.gender = 2
				} else if (this.index == 0){
					this.formData.gender = 1
				} else {
					this.formData.gender = 3
				}
			},
			bindPickerChangeLang(v, i) {
				this.langIndex = v.detail.value
				this.formData.language = this.langArray[v.detail.value]
			},
			bindDateChange(v, i) {
				this.formData.birthday = v.detail.value
			},
			submit() {
				if (!this.formData.head) {
					uni.showToast({
						icon: 'none',
						title: '请上传头像',
						duration: 3000
					})
					return false
				} else if (!this.formData.name.trim()) {
					uni.showToast({
						icon: 'none',
						title: '请输入名称',
						duration: 3000
					})
					return false
				}
				this.formData.language= this.language || this.userInfo.language || this.wxInfo.language
				console.log(this.formData)
				this.$http('post', '/app/me/modify', this.formData, {
					'Content-Type': 'application/x-www-form-urlencoded'
				}).then(res => {
					if (res.success) {
						uni.setStorageSync('userInfo', res.data)
						uni.showToast({
							icon: 'none',
							title: '个人信息保存成功',
							duration: 3000
						})
						if (this.isBack == false) {
							uni.navigateTo({
								url: '/pages/index/index'
							})
							return
						}
						this.isBack = true
					}
				})
			}
		}
	}
</script>

<style lang="less">
.content {
	background-color: #FBFCFE;
	// padding: 0 30px;
	min-height: 100vh;
}
.content-box {
	font-size: 40rpx;
	font-family: Helvetica-Bold, Helvetica;
	font-weight: bold;
	color: #1F1F1F;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 34rpx;
	padding: 0 30rpx;
	.content-title {
		font-size: 40rpx;
		padding: 28rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
	}
	.conten-btn {
		width: 120rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		background: #0078FF;
		border-radius: 36rpx;
		font-size: 28rpx;
		font-family: Helvetica;
		color: #FFFFFF;
	}
}
.contetn-list {
	padding: 30rpx 40rpx;
	width: 690rpx;
	margin: 0 auto;
	background: #FFFFFF;
	box-shadow: 0px 4px 12px 0px rgba(55, 58, 64, 0.08);
	border-radius: 4px;
	box-sizing: border-box;
	.contetn-list__item {
		margin-bottom: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}
.flex-l {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.user-info {
	.img {
		width: 128rpx;
		height: 128rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	.info {
		font-size: 40px;
		font-family: Helvetica-Bold, Helvetica;
		font-weight: bold;
		color: #1F1F1F;
	}
	.num {
		color: rgba(31, 31, 31, 0.65);
		font-size: 32rpx;
		font-family: Helvetica-Bold, Helvetica;
	}
}
.right {
	width: 32rpx;
	height: 32rpx;
}
.content-btn {
	position: fixed;
	bottom: 40rpx;
	left: 50%;
	transform: translate(-50%, 0);
	width: 610rpx;
	height: 88rpx;
	background: #0078FF;
	border-radius: 56px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
}
.tips {
	text-align: right;
}
.table-view {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	background-color: #fff;
}
</style>
